<template>
    <div class="comment-list">
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-content">
          <div class="comment-header">
            <img :src="getAvatar(comment)" alt="头像" class="avatar" />
            <div class="comment-meta">
              <span class="username">{{ comment.user?.name || '匿名' }}</span>
              <span class="date">{{ formatDate(comment.created_at) }}</span>
            </div>
          </div>
          <p class="comment-text">{{ comment.content }}</p>
          <div class="comment-contact" v-if="comment.guest_email || comment.guest_phone">
            <span v-if="comment.guest_email">邮箱: {{ comment.guest_email }}</span>
            <span v-if="comment.guest_phone">手机: {{ comment.guest_phone }}</span>
          </div>
          <el-button
              type="text"
              size="small"
              @click="showReplyForm(comment.id)"
              class="reply-button"
          >
            回复
          </el-button>
        </div>
        <div v-if="comment.children?.length" class="comment-replies">
          <CommentList :comments="comment.children" @submit="emitSubmit" />
        </div>
        <div v-if="replyingTo === comment.id" class="reply-form">
          <CommentForm :parent-id="comment.id" @submit="emitSubmit" @cancel="replyingTo = null" />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import CommentForm from './CommentForm.vue';
  
  const props = defineProps({
    comments: { type: Array, required: true },
  });
  
  const emit = defineEmits(['submit']);
  const replyingTo = ref(null);
  
  const showReplyForm = (id) => {
    replyingTo.value = id;
  };
  
  const emitSubmit = (data) => {
    emit('submit', data);
    replyingTo.value = null;
  };
  
  const formatDate = (date) => new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
  });
  
  const getAvatar = (comment) => {
    const name = comment.guest_name || '匿名';
    return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&size=40&background=2563eb&color=ffffff`;
  };
  </script>
  
  <style scoped lang="scss">
  .comment-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .comment-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
  
  .comment-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .comment-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  
  .comment-meta {
    flex: 1;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #64748b;
  }
  
  .comment-text {
    font-size: 15px;
    color: #1e293b;
    margin: 8px 0;
  }
  
  .comment-contact {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 8px;
  }
  
  .reply-button {
    color: #2563eb;
    &:hover {
      color: #1d4ed8;
    }
  }
  
  .comment-replies {
    margin-left: 48px; /* 与头像对齐 */
    margin-top: 16px;
  }
  
  .reply-form {
    margin-top: 16px;
  }
  </style>